import { useState } from 'react';
import { Checkbox, Button, App } from 'antd';
import loadable from '@loadable/component';
import { useSelector } from 'react-redux';

import { RIGHT } from '@/config/url';
import { isWx } from '@/utils';

import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));

export default props => {
    const { message } = App.useApp();
    const [agreement, setAgreement] = useState(true);

    const onConfirm = () => {
        message.destroy();
        const redirect_uri = encodeURIComponent(location.href);
        const appId = 'wxc59a674315a09529';

        if(!agreement) {
            message.warning(`请确认用户服务协议`);
            return;
        }

        if(!isWx()) {
            message.warning(`请在微信环境下使用微信一键登录`);
            return;
        }

        // 如果是微信公众号
        window.location.href =
            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
            (appId || '') +
            '&redirect_uri=' +
            redirect_uri +
            '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
    };

    // 切换协议同意状态
    const onChangeAgree = e => {
        let checked = e.target.checked;
        setAgreement(checked);
    };

    return (
        <div className={styles['container']}>
            <Button onClick={onConfirm} type="primary" shape="round" icon={<IconFont name="icon-disanfang-weixin"/>}>微信一键登录</Button>
            <div className={styles['confirm']}>
                <Checkbox onChange={onChangeAgree} checked={agreement}>已同意<a href={`${RIGHT}`} target="_black">《用户服务协议》</a></Checkbox>
            </div>
        </div>
    )
};